[V0_FILE]typescriptreact:file="components/particle-field.tsx" isMerged="true" "use client" import { useEffect, useRef } from "react" interface Particle { x: number y: number vx: number vy: number size: number opacity: number life: number } export function ParticleField() { const canvasRef = useRef(null) useEffect(() => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx) return let animationId: number const particles: Particle[] = [] const maxParticles = 100 const resize = () => { canvas.width = window.innerWidth canvas.height = window.innerHeight } const createParticle = (): Particle => ({ x: Math.random() * canvas.width, y: Math.random() * canvas.height, vx: (Math.random() - 0.5) * 0.5, vy: (Math.random() - 0.5) * 0.5, size: Math.random() * 2 + 0.5, opacity: Math.random() * 0.8 + 0.2, life: Math.random() * 200 + 100, }) // Initialize particles for (let i = 0; i < maxParticles; i++) { particles.push(createParticle()) } const animate = () => { ctx.clearRect(0, 0, canvas.width, canvas.height) particles.forEach((particle, index) => { // Update particle particle.x += particle.vx particle.y += particle.vy particle.life-- // Wrap around screen if (particle.x < 0) particle.x = canvas.width if (particle.x > canvas.width) particle.x = 0 if (particle.y < 0) particle.y = canvas.height if (particle.y > canvas.height) particle.y = 0 // Fade out over time particle.opacity = Math.max(0, particle.life / 200) // Draw particle ctx.beginPath() ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2) ctx.fillStyle = `rgba(255, 255, 255, ${particle.opacity * 0.6})` ctx.fill() // Add glow effect ctx.beginPath() ctx.arc(particle.x, particle.y, particle.size * 2, 0, Math.PI * 2) ctx.fillStyle = `rgba(99, 102, 241, ${particle.opacity * 0.2})` ctx.fill() // Reset particle if dead if (particle.life <= 0) { particles[index] = createParticle() } }) animationId = requestAnimationFrame(animate) } resize() animate() window.addEventListener("resize", resize) return () => { window.removeEventListener("resize", resize) cancelAnimationFrame(animationId) } }, []) return

JERROD LEW

My Work

Contact Me

About

Tags

Share

About

Tags

Share

More from jerrod

More Templates Like This

About

Tags

Share

About

Tags

Share

More from jerrod

More Templates Like This